    <div class="row">
        <div class="col-md-4">
        </div>            
        <div class="col-md-4">
            <div class="box box-primary">
                <div class="box-header">
                    <h3 class="box-title">Add New User</h3>
                </div><!-- /.box-header -->
                <!-- form start -->
                <form role="form">
                    <div class="box-body">
                        <div class="form-group" id="iduser">

                            <label for="inputusername" id="labeluser" style="">Username</label>
                            <label class="control-label" for="inputSuccess" style="display:none;" id="icheckuser"><i class="fa fa-check" ></i> Username is available.</label>
                            <input type="text" class="form-control" id="txtusername" placeholder="Enter username">
                        </div>
                        <div class="form-group">
                            <label for="inputfullname" id="labelfullname" style="">Full Name</label>
                            <input type="text" class="form-control" id="txtfullname" placeholder="Enter Fullname">
                        </div>
                        <div class="form-group" id="idemail">
                            <label for="inputemail" id="labelemail">Email address</label>
                             <label class="control-label" for="inputError" style="display:none;" id="icheckemail"><i class="fa fa-times-circle-o" ></i> Not a valid e-mail address</label>
                            <input type="text" class="form-control" id="txtemail" placeholder="Enter email">
                        </div>

                        <div class="form-group" id="idpass">
                            <label for="inputpass" id="labelpass">Password</label>
                            <label class="control-label" for="inputWarning" style="display:none;" id="icheckpass"><i class="fa fa-warning" ></i> The password field is required !</label>
                            <input type="password" class="form-control" id="txtpassword" placeholder="Enter password">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEmail1">Address</label>
                            <input type="text" class="form-control" id="txtaddress" placeholder="Enter address">
                        </div>   
                        <div class="form-group" id="idselect">
                            <label id="labelselect"> Choose group</label>
                            <label class="control-label" for="inputWarning" style="display:none;" id="icheckselect"><i class="fa fa-warning" ></i> Please choose any option !</label>
                            <select class="form-control" id="select">
                                <option selected>Select</option>
                                <option value="1">Admin</option>
                                <option value="2">User</option>
                            </select>
                        </div>     
                        <div class="form-group">
                            <label for="exampleInputFile">Avatar</label>
                            <input type="file" id="exampleInputFile">
                            <!-- <p class="help-block">Example block-level help text here.</p> -->
                        </div>
                    </div><!-- /.box-body -->

                    <div class="box-footer">
                        <button type="button" class="btn btn-primary" id="btnsubmit">Submit</button>
                    </div>
                </form>
            </div>

        </div>
        <div class="col-md-4">
        </div>   
    </div>

    <script>
        isuccess_user = "";
        isuccess_email= "";
        isuccess_pass = "";
        // Add user function
       $("#btnsubmit").click(function(){
            var username =  $("#txtusername").val();
            var email =  $("#txtemail").val();
            var pass =  $("#txtpassword").val();
            var address =  $("#txtaddress").val();
            var select =  $("#select").val();
            var fullname =  $("#txtfullname").val();
            var url = "<?php echo base_url(); ?>";
            var dataString = "fullname="+fullname+"&username="+username+"&email="+email+"&address="+address+"&select="+select+"&password="+pass;
            if($('#select').val() == "Select"){
               $('#idselect').attr('class','form-group has-warning');
                $('#labelselect').attr('style','display:none');
                $('#icheckselect').attr('style','');
                return false;
            }else{
                $('#idselect').attr('class','form-group');
                $('#labelselect').attr('style','');
                $('#icheckselect').attr('style','display:none');
                if(isuccess_user == 2 && isuccess_email == 2){      
                    $.ajax({
                        type:"POST",
                        url: url+"admin/add_user",
                        data: dataString,
                        success: function(x){
                            alert('Successfully ^_^ !');
                            window.location.href= url + "admin/user";
                        }
                    });
                }else{
                    alert("Please enter full infomation !");
                    return false;
                }
            }

       });

       // Keyup username
       $("#txtusername").keyup(function(){
        
         var ilength = $(this).val();
         if(ilength.length >= 6){
            var url = "<?php echo base_url(); ?>";
            var dataString = "username="+ilength;
            $.ajax({
                type: "POST",
                url: url+"admin/check_user",
                data: dataString,
                success : function(x){
                    if(x == 0){
                        $('#iduser').attr('class','form-group has-success');
                        $('#labeluser').attr('style','display:none');
                        $('#icheckuser').attr('style','');
                                                // $('#usersucess').attr('for','inputSuccess');
                                                $('#icheckuser').html("<i class='fa fa-check' ></i> Username is available.");
                                                return isuccess_user = 2;
                                            }else{
                                                $('#iduser').attr('class','form-group has-error');
                                                $('#labeluser').attr('style','display:none');
                                                $('#icheckuser').attr('style','');
                                                $('#icheckuser').attr('for','inputError');
                                                $('#icheckuser').html("<i class='fa fa-times-circle-o'></i> This username already exists. Please choose other username.");
                                                return isuccess_user = 0;
                                            }
                                        }
                                    });
        }
        else{
            if($('#txtusername').val() == ""){
                    $('#iduser').attr('class','form-group');
                    $('#labeluser').attr('style','');
                    $('#icheckuser').attr('style','display:none');
                    return isuccess_user = 1;
            }
                
        }
    });// end keyup username

    //Keyup email
    $("#txtemail").keyup(function(){
        
        var ilength = $(this).val();
        var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        if($("#txtemail").val() == ""){
            $('#idemail').attr('class','form-group');
            $('#labelemail').attr('style','');
            $('#icheckemail').attr('style','display:none');
            return isuccess_email = 1;
        }
        else{
              if (!filter.test(ilength)) {
            $('#idemail').attr('class','form-group has-error');
            $('#labelemail').attr('style','display:none');
            $('#icheckemail').attr('style','');
            $('#icheckemail').html("<i class='fa fa-times-circle-o'></i> Not a valid e-mail address.");
            ilength.focus;
            return isuccess_email = 0;
            return false;
        }else{
                $('#idemail').attr('class','form-group has-success');
                $('#labelemail').attr('style','display:none');
                $('#icheckemail').attr('style','');
                $('#icheckemail').attr('for','inputSuccess');
                $('#icheckemail').html("<i class='fa fa-check'></i> Email is available.");            
                return isuccess_email = 2;
        }   
        }
       
    });//end keyup email

    // event blur for email
    $("#txtemail").blur(function(){
        var ilength = $("#txtemail").val();
        var url = "<?php echo base_url(); ?>";
        var dataString = "email="+ilength+"&icheck = 1";
        if(isuccess_email == 2){
            if($("#txtemail").val() == ""){
                $('#idemail').attr('class','form-group');
                $('#labelemail').attr('style','');
                $('#icheckemail').attr('style','display:none');
            }else{
                $.ajax({
                    type: "POST",
                    url: url+"admin/check_email",
                    data: dataString,
                    success : function(x){
                    if (x == 1) {
                        $('#idemail').attr('class','form-group has-error');
                        $('#labelemail').attr('style','display:none');
                        $('#icheckemail').attr('style','');
                        $('#icheckemail').html("<i class='fa fa-times-circle-o'></i> This email already exists. Please choose a different one.");
                        return isuccess_email = 0;
                    }else{
                        $('#idemail').attr('class','form-group has-success');
                        $('#labelemail').attr('style','display:none');
                        $('#icheckemail').attr('style','');
                        $('#icheckemail').attr('for','inputSuccess');
                        $('#icheckemail').html("<i class='fa fa-check'></i> Email is available.");
                        return isuccess_email = 2;
                    }
                    }
                });
            }
        }
        else{
             return false;
        }

    })// end event blur
    // Event keyup of password
    $("#txtpassword").keyup(function(){
        isuccess_pass = "";
        if($("#txtpassword").val() == ""){
            $('#idpass').attr('class','form-group');
            $('#labelpass').attr('style','');
            $('#icheckpass').attr('style','display:none');
            // $('#icheckpass').attr('for','inputWarning');
            // $('#icheckemail').html("<i class='fa fa-warning'></i> The email field is required !");     
        }else{
                $('#idpass').attr('class','form-group');
                $('#labelpass').attr('style','');
                $('#icheckpass').attr('style','display:none');
                return isuccess_pass = 2;

        }
       
    });//end event keyup

    </script>
